<template>
  <div class="main-box" id="container">
    <div class="top-box">
      <h4 style="letter-spacing:6px;font-weight:bold">西安市勤务基础数据平台</h4>
      <!--      <button @click="openModal">111</button>-->
    </div>
    <!--    <div class="left-box">222</div>-->


    <div class="right-box">
      <rigth-drawer></rigth-drawer>


      <div class="rightIcon">
        <img src="/imgs/展开按钮切图拷贝.png" alt="">
      </div>
     <div class="rightContent" v-show="true">
       <div style="float: left; width: 58%">
         <div>
           <a-input
               class="right-input"
               v-model:value="rightInput"
               placeholder="搜索"
           />
         </div>
         <div v-for="(item, index) in rightBtnArr" key="index">
           <div
               class="right-btn1"
               :class="item.flag == 1 ? 'right-btn1_h' : 'right-btn1'"
               @click="rightClick1(index)"
           >
             {{ item.name }}
           </div>
           <div v-for="(child, index1) in item.child">
             <div
                 class="right-btn2"
                 :class="child.flag == 1 ? 'right-btn2_h' : 'right-btn2'"
                 @click="rightClick2(index, index1, child.name)"
             >
               {{ child.name }}
             </div>
             <div
                 v-for="(child1, index1) in child.child"
                 class="right-btn3"
                 :class="child1.flag == 1 ? 'right-btn3_h' : 'right-btn3'"
                 @click="rightClick3(index, index1)"
             >
               {{ child1.name }}
             </div>
           </div>
         </div>
       </div>
       <div
           style="
          float: left;
          background: url('/imgs/属性背景框切图.png') no-repeat 100%;
          width: 123px;
          height: 147px;
          padding: 20px;
          line-height: 38px;
        "
       >
         <div>
          <span
              style="
              font-size: 16px;
              margin: 0px 10px;
              width: 16px;
              display: inline-block;
              color: #f1f503;
            "
          ><check-outlined /></span
          ><span>创建</span>
         </div>
         <div>
          <span
              style="
              font-size: 16px;
              margin: 0px 10px;
              width: 16px;
              display: inline-block;
            "
          ><check-outlined v-show="false" /></span
          ><span>重命名</span>
         </div>
         <div>
          <span
              style="
              font-size: 16px;
              margin: 0px 10px;
              width: 16px;
              display: inline-block;
            "
          ><check-outlined v-show="false" /></span
          ><span>删除</span>
         </div>
       </div>
     </div>
    </div>
    <div class="footer-box">
      <div class="footer-main">
        <a-space>
          <div
            :class="flag1 == 1 ? 'gj1_h' : 'gj1'"
            @click="bottomClick(1)"
          ></div>
          <div
            :class="flag1 == 2 ? 'gj2_h' : 'gj2'"
            @click="bottomClick(2)"
          ></div>
          <div
            :class="flag1 == 3 ? 'gj3_h' : 'gj3'"
            @click="bottomClick(3)"
          ></div>
          <div
            :class="flag1 == 4 ? 'gj4_h' : 'gj4'"
            @click="bottomClick(4)"
          ></div>
        </a-space>
        <div class="gj-btn" @click="openModal2"></div>
      </div>
    </div>
    <div class="modal1" v-show="showModal1">
      <img src="/imgs/关闭.png" alt="" @click="closeModal1" />
    </div>
    <div class="modal2" v-show="showModal2">
      <div style="padding: 20px 40px">
        <span style="color: #fff; font-size: 20px; margin: 20px 0px 0px 20px"
          >对象信息</span
        >
        <img src="/imgs/关闭.png" alt="" @click="closeModal2" />
      </div>
      <div style="padding: 20px">
        <a-form
          :model="formState"
          ref="formRef"
          name="basic"
          autocomplete="off"
          :labelCol="{ style: 'width:100px' }"
        >
          <a-row class="row-box" :gutter="24">
            <a-col class="gutter-row" :span="12">
              <a-form-item label="名称" name="名称">
                <a-input type="text" v-model:value="formState.名称" />
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="颜色">
                <div class="colorInput" @click="changFillColor"></div>
                <Sketch
                  v-model="formState.GraphicColor"
                  :show="state.showFillSketch"
                  @changButton="changFillColorButton"
                ></Sketch>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="经度" name="经度">
                <a-input type="text" v-model:value="formState.经度" />
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="最近距离" name="最近距离">
                <a-input type="text" v-model:value="formState.最近距离" />
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="纬度" name="纬度">
                <a-input type="text" v-model:value="formState.纬度" />
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="最远距离" name="最远距离">
                <a-input type="text" v-model:value="formState.最远距离" />
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="高度" name="高度">
                <a-input v-model:value="formState.最远距离" />
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="跟随视野缩放" name="跟随视野缩放">
                <a-switch v-model:checked="checked" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div>
          <a-tabs v-model:activeKey="activeKey" @change="changeHandle">
            <a-tab-pane key="属性信息" tab="属性信息">
              <div style="width: 320px">
                <a-form-item label="内容类型" name="内容类型">
                  <a-input type="text" v-model:value="formState.名称" />
                </a-form-item>
                <a-form-item label="编辑内容" name="编辑内容">
                  <a-input type="text" v-model:value="formState.名称" />
                </a-form-item>
              </div>
            </a-tab-pane>
            <a-tab-pane key="方向信息" tab="方向信息">
              <div></div>
            </a-tab-pane>
            <a-tab-pane key="标注风格" tab="标注风格">
              <div></div>
            </a-tab-pane>
            <a-tab-pane key="标签风格" tab="标签风格">
              <div></div>
            </a-tab-pane>
          </a-tabs>
        </div>
        <div>
          <a-space style="float: right; padding-right: 20px">
            <span style="color: #fff">隐藏</span>
            <a-switch v-model:checked="checked" /><span style="color: #fff"
              >显示</span
            >
            <img src="/imgs/btn1.png" alt="" />
            <img src="/imgs/btn2.png" alt="" />
            <img src="/imgs/btn3.png" alt="" />
          </a-space>
        </div>
      </div>
    </div>
    <div class="modal1" v-show="showModal3">
      <div style="padding: 10px">
        <span style="color: #fff; font-size: 20px; margin: 20px 0px 0px 20px"
          >大唐不夜城</span
        >
        <img src="/imgs/关闭.png" alt="" @click="closeModal3" />
      </div>
      <div style="padding: 20px">
        <a-space>
          <div class="head-txt-box">
            <img src="/imgs/dtbyc1.png" alt="" />
          </div>
          <div class="head-txt-box"><img src="/imgs/dtbyc2.png" alt="" /></div>
        </a-space>
      </div>
      <div style="padding: 20px 50px">
        <a-input type="text" placeholder="文本框"></a-input>
      </div>
    </div>
    <!-- <Modal ref="modalRef"></Modal> -->
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
  nextTick,
  watch,
} from "vue";
//1.先使用import导入你要在该组件中使用的子组件
import rigthDrawer from './RightDrawer.vue'

import { Sketch } from "@ans1998/vue3-color";
import {
  LeftCircleOutlined,
  RightCircleOutlined,
  SyncOutlined,
  CheckOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import axios from "axios";
import VueCookies from "vue-cookies";
import Modal from "./Modal.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";

export default defineComponent({
  components: {
    LeftCircleOutlined,
    RightCircleOutlined,
    SyncOutlined,
    CheckOutlined,
    Modal,
    Sketch,
    rigthDrawer,
  },
  setup(props, { emit }) {
    const modalRef = ref();
    const showModal1 = ref(false);
    const showModal2 = ref(false);
    const showModal3 = ref(false);
    const map = shallowRef(null);
    const rightInput = ref("");
    const formState = reactive({});
    const activeKey = ref("属性信息");

    const rightBtnArr = ref([
      {
        name: "模型",
        flag: 1,
        child: [
          { name: "大唐不夜城", flag: 1 },
          { name: "大唐宾馆", flag: 0 },
        ],
      },
      {
        name: "驻地",
        flag: 0,
        child: [
          { name: "倾斜模型", flag: 0 },
          { name: "三区划分", flag: 0 },
          { name: "警力部署", flag: 0 },
          { name: "无人机反制", flag: 0 },
          {
            name: "重点部位",
            flag: 0,
            child: [
              { name: "加油站", flag: 0 },
              { name: "加气站", flag: 0 },
              { name: "应急避险", flag: 0 },
            ],
          },
          { name: "任务流线", flag: 0 },
        ],
      },
    ]);
    const flag1 = ref(0);

    const openModal1 = () => {
      showModal1.value = true;
    };
    const closeModal1 = () => {
      showModal1.value = false;
    };

    const openModal2 = () => {
      showModal2.value = true;
    };
    const closeModal2 = () => {
      showModal2.value = false;
    };
    const openModal3 = () => {
      showModal3.value = true;
    };
    const closeModal3 = () => {
      showModal3.value = false;
    };
    const bottomClick = (num) => {
      flag1.value = num;
    };
    const rightClick1 = (num) => {
      // rightBtnArr.value[num].flag = 1;
    };

    const rightClick2 = (num1, num2, name) => {
      if (name == "大唐不夜城") {
        showModal3.value = true;
      }
      // rightBtnArr.value[num1].child[num2].flag = 1;
    };

    const ininMap = () => {
      AMapLoader.load({
        key: "dc9795df105fd76f649c50bd4b54f22f", //设置您的key
        version: "2.0",
        plugins: ["AMap.ToolBar", "AMap.Driving"],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0.0",
        },
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            mapStyle: "amap://styles/darkblue", //设置地图的显示样式
            pitch: 45,
            viewMode: "3D",
            terrain: true, // 开启地形图
            zoom: 18,
            zooms: [2, 22],
            center: [108.96, 34.22],
          });
          let positionArr = [
            // [113.357224,34.977186],
            // [114.555528,37.727903],
            // [112.106257,36.962733],
            // [109.830097,31.859027],
            // [116.449181,39.98614],
          ];
          for (let item of positionArr) {
            let marker = new AMap.Marker({
              position: [item[0], item[1]],
            });
            this.map.add(marker);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    };
    const state = reactive({
      rowId: "",
      btnTxt: "添加",
      fillC: "填充颜色",
      size: "点大小",
      borderW: "边框宽度",
      showLineSketch: false,
      showFillSketch: false,
    });
    function changFillColor() {
      state.showFillSketch = true;
    }
    function changFillColorButton(item) {
      state.showFillSketch = false;
      if (item.isOk) {
        formState.GraphicColor = item.activeColor;
      }
    }
    onMounted(() => {
      ininMap();
    });

    return {
      changFillColor,
      changFillColorButton,
      state,
      modalRef,
      openModal1,
      showModal1,
      closeModal1,
      openModal2,
      showModal2,
      closeModal2,
      openModal3,
      showModal3,
      closeModal3,
      rightInput,
      rightBtnArr,
      bottomClick,
      rightClick2,
      rightClick1,
      flag1,
      formState,
      activeKey,
    };
  },
});
</script>

<style lang="less" scoped>
.main-box {
  width: 100%;
  height: 100%;
  background-color: #ddd;
}

.top-box {
  position: absolute;
  padding: 10px;
  width: 100%;
  height: 129px;
  top: 0px;
  z-index: 1;
  background-image: url("/imgs/title.png");
  text-align: center;
  background-size: 100% 100%;
  h4 {
    color: #fff;
    font-size: 36px;
    line-height: 100px;
  }
}

.footer-box {
  position: absolute;
  padding: 10px;
  width: 100%;
  height: 99px;
  bottom: 0px;
  z-index: 1;
  background-image: url("/imgs/工具栏背景切图.png");
  background-size: 100% 100%;
  .footer-main {
    width: 450px;
    height: 80px;

    position: absolute;
    left: 50%;
    top: 4%;
    margin-left: -200px; //要宽度的一半
    //margin-top:-200px;
    text-align: center;
  }

  .gj1 {
    background: url("/imgs/标绘未选中图标.png") no-repeat;
    width: 37px;
    height: 40px;
    cursor: pointer;
    margin: 10px auto;
    margin-right: 30px;
    background-position-y: 50%;
  }
  .gj1_h {
    background: url("/imgs/标绘选中图标.png") no-repeat;
    width: 37px;
    height: 40px;
    cursor: pointer;
    margin: 15px auto;
    margin-right: 30px;
    background-position-y: 50%;
  }
  .gj1:hover {
    background: url("/imgs/标绘选中图标.png") no-repeat;
    cursor: pointer;
  }

  .gj2 {
    background: url("/imgs/标注未选中图标.png") no-repeat;
    width: 37px;
    height: 40px;
    cursor: pointer;
    margin: 15px auto;
    margin-right: 30px;
    background-position-y: 50%;
  }
  .gj2_h {
    background: url("/imgs/标注选中图标.png") no-repeat;
    width: 37px;
    height: 40px;
    cursor: pointer;
    margin: 15px auto;
    margin-right: 30px;
    background-position-y: 50%;
  }
  .gj2:hover {
    background: url("/imgs/标注选中图标.png") no-repeat;
    cursor: pointer;
  }

  .gj3 {
    background: url("/imgs/测量未选中图标.png") no-repeat;
    width: 37px;
    height: 40px;
    cursor: pointer;
    margin: 15px auto;
    margin-right: 30px;
    background-position-y: 50%;
  }
  .gj3_h {
    background: url("/imgs/测量选中切图.png") no-repeat;
    width: 37px;
    height: 40px;
    cursor: pointer;
    margin: 15px auto;
    margin-right: 30px;
    background-position-y: 50%;
  }

  .gj3:hover {
    background: url("/imgs/测量选中切图.png") no-repeat;
    cursor: pointer;
  }

  .gj4 {
    background: url("/imgs/工具未选中图标.png") no-repeat;
    width: 37px;
    height: 40px;
    cursor: pointer;
    background-position-y: 50%;
  }
  .gj4_h {
    background: url("/imgs/工具选中图标.png") no-repeat;
    width: 37px;
    height: 40px;
    cursor: pointer;
    background-position-y: 50%;
  }

  .gj4:hover {
    background: url("/imgs/工具选中图标.png") no-repeat;
    cursor: pointer;
  }

  .gj-btn {
    background: url("/imgs/注释背景切图.png");
    width: 91px;
    height: 55px;
    position: absolute;
    top: -14px;
    right: 0px;
    cursor: pointer;
  }
}

.right-box {
  position: absolute;

  height: calc(100% - 98px);
  top: 80px;
  z-index: 1;
  right: 0px;

  color: #fff;
  .rightIcon{
    width: 107px;

  }
.rightContent{
  width: 342px;
  background: url("/imgs/right-bg.png");
  padding: 20px 10px 20px 30px;
  .right-input {
    width: 120px;
    background: none;
    border-radius: 30px;
    margin-left: 15px;
  }

  .right-btn1 {
    width: 149px;
    height: 69px;
    background: url("/imgs/一级按钮未选中切图.png") no-repeat 100%;
    text-align: center;
    line-height: 70px;

    cursor: pointer;
  }
  .right-btn1_h {
    width: 149px;
    height: 69px;
    background: url("/imgs/一级按钮选中切图.png") no-repeat 100%;
    text-align: center;
    line-height: 70px;

    cursor: pointer;
  }
  .right-btn1:hover {
    background: url("/imgs/一级按钮选中切图.png") no-repeat 100%;
  }
  .right-btn2 {
    width: 110px;
    height: 42px;
    background: url("/imgs/二级标题未选中切图.png");
    text-align: center;
    line-height: 36px;
    margin: 0px 30px 10px;

    cursor: pointer;
  }
  .right-btn2_h {
    width: 110px;
    height: 42px;
    background: url("/imgs/二级按钮选中切图.png");
    text-align: center;
    line-height: 36px;
    margin: 0px 30px 10px;
    cursor: pointer;
  }
  .right-btn2:hover {
    background: url("/imgs/二级按钮选中切图.png");
  }
  .right-btn3 {
    width: 101px;
    height: 32px;
    background: url("/imgs/三级标题未选中按钮切图.png");
    text-align: center;
    line-height: 32px;
    margin: 0px 60px 10px;

    cursor: pointer;
  }
  .right-btn3_h {
    width: 101px;
    height: 32px;
    background: url("/imgs/三级标题选中切图.png");
    text-align: center;
    line-height: 32px;
    margin: 0px 60px 10px;
    cursor: pointer;
  }
  .right-btn3:hover {
    background: url("/imgs/三级标题选中切图.png");
  }

  img {
    cursor: pointer;
  }
}

}

.left-box {
  position: absolute;
  width: 300px;
  height: calc(100% - 98px);
  top: 64px;
  z-index: 1;
  left: 20px;
  background-color: rgba(255, 255, 255, 0.67);
  padding-top: 4px;

  z-index: 1;
}
.head-txt-box {
  padding: 10px 10px !important;
  width: 248px;
  height: 181px;
  box-shadow: 0 0 1px #20364d;
  background: linear-gradient(to left, #02edff, #02edff) left top no-repeat,
    linear-gradient(to bottom, #02edff, #02edff) left top no-repeat,
    linear-gradient(to left, #02edff, #02edff) right top no-repeat,
    linear-gradient(to bottom, #02edff, #02edff) right top no-repeat,
    linear-gradient(to left, #02edff, #02edff) left bottom no-repeat,
    linear-gradient(to bottom, #02edff, #02edff) left bottom no-repeat,
    linear-gradient(to left, #02edff, #02edff) right bottom no-repeat,
    linear-gradient(to left, #02edff, #02edff) right bottom no-repeat !important;
  background-size: 1px 15px, 15px 1px, 1px 15px, 15px 1px !important;
  background-color: rgba(32, 54, 77, 0.7) !important;
  z-index: 996 !important;
}

.modal1 {
  width: 557px;
  height: 365px;
  background: url("/imgs/大唐不夜城弹框背景切图.png");
  position: absolute;
  bottom: 100px;
  left: 10px;
  z-index: 1111111111111111;
  cursor: pointer;
  img {
    float: right;
  }
}
.modal2 {
  width: 780px;
  height: 548px;
  background: url("/imgs/对象信息背景切图.png");
  position: absolute;
  top: 100px;
  left: 0px;
  z-index: 1111111111111111;
  cursor: pointer;
  img {
    float: right;
  }
}

/deep/ .ant-input {
  background: none;
  border: 1px solid #2787c8;
  color: #fff;
}
/deep/ .ant-form-item-label > label {
  color: #fff;
}
.colorInput {
  height: 30px;
  width: 30px;
  border: 1px solid #2787c8;
  cursor: pointer;
}
.vc-sketch {
  position: absolute;
  z-index: 11111111111;
}
/deep/ .ant-tabs-tab-btn {
  color: #fff;
}
</style>

